<template>
  <div>
    <van-nav-bar title="频道管理" />
    <van-cell :value="value" icon="qr" @click="editChannel">
      <template #title>
        <span class="custom-title">我的频道</span>
        <van-tag type="success" round @click.stop="enterChannel"
          >点击进入频道</van-tag
        >
      </template>
    </van-cell>
    <div class="myChannel">
      <van-button
        type="default"
        :icon="cross"
        size="small"
        :text="item.name"
        :key="item.id"
        @click="clickChannel(item)"
        v-for="(item, index) in userChannelsList"
      ></van-button>
    </div>
    <van-cell title="编辑频道列表" />
    <div class="allChannel">
      <van-button
        type="default"
        size="small"
        :text="item.name"
        v-for="item in unCheckChannel"
        :key="item.id"
        @click="moreFn(item)"
      ></van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "channelEdit",
  props: {
    userChannelsList: Array,
    unCheckChannel: Array,
  },
  data() {
    return {
      isEdit: true,
      cross: "minus",
      value: "编辑",
    };
  },
  methods: {
    editChannel() {
      this.cross = this.isEdit ? "cross" : "minus";
      this.isEdit = !this.isEdit;
      if (this.isEdit) {
        this.value = "编辑";
      } else {
        this.value = "完成";
      }
    },
    enterChannel() {
      console.log(2);
    },
    moreFn(e) {
      if (!this.isEdit) {
        this.$emit("addChannel", e);
      }
    },
    clickChannel(e) {
      if (!this.isEdit) {
        this.$emit("removeChannel", e);
      } else {
        this.$emit("input", e.id);
        // console.log(e.id);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.myChannel,
.allChannel {
  padding: 10px;
  .van-button {
    margin: 4px 6px;
    position: relative;
    .van-button__icon {
      position: absolute;
      top: -9px;
      right: -6px;
      background-color: rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      color: #fff;
      font-size: 12px;
    }
    .van-icon-minus:before {
      display: none;
    }
  }
}
</style>